<?xml version="1.0" encoding="utf-8"?>
<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ev="http://www.w3.org/2001/xml-events"
 xmlns:xf="http://www.w3.org/2002/xforms"
>
  <head>
    <script src="http://svn.x-port.net/svn/public/_Lib/xH.js" type="text/javascript">/**/</script>
    <title>GData Login</title>
    <style>
      body
      {
        font-family : "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
        font-size : 11px;
      }

      #main-body
      {
        margin : 0;
        background-color : #eee;
        border : 5px solid #333;
        padding : 15px;
        display : block;
      }

      xf\:cases
      {
        -event-xforms-deselect : fx-Effect-SlideUp(duration:0);
        -event-xforms-select : fx-Effect-SlideDown(duration:1);
      }
    </style>

    <xf:model>
      <!--
        The first instance manages the data for the request.
        
        For more details see:
        
          http://code.google.com/apis/accounts/AuthForInstalledApps.html
      -->
      <xf:instance>
        <instanceData xmlns="">
          <accountType>HOSTED_OR_GOOGLE</accountType>
          <Email />
          <Passwd />
          <service>wise</service>
          <source>formsplayer-gdataauthenticationsample-1.0</source>
        </instanceData>
      </xf:instance>

      <!--
        We use this instance to store the results of the request.
      -->
      <xf:instance id="inst-rs">
        <result xmlns="" />
      </xf:instance>
      
      <!--
        We use this instance to store the user's data.
      -->
      <xf:instance id="inst-user-data">
        <instanceData xmlns="">
          <authid />
        </instanceData>
      </xf:instance>

      <!--
        Here is the actual request. At the beginning
        we toggle the 'busy' case, and at the end we toggle the
        'done' or 'error' case. If the request was succesful we
        obtain the authorisation ID and store it for subsequent
        actions.
      -->
      <xf:submission
       method="urlencoded-post" resource="https://www.google.com/accounts/ClientLogin"
       separator="&amp;"
       replace="text" target="instance('inst-rs')"
      >
        <xf:toggle case="case-busy" ev:event="xforms-submit" />
        <xf:toggle case="case-error" ev:event="xforms-submit-error" />
        <xf:action ev:event="xforms-submit-done">
          <xf:setvalue
            ref="instance('inst-user-data')/authid"
            value="substring-after(instance('inst-rs'), 'Auth=')"
          />
          <xf:toggle case="case-done" />
        </xf:action>
      </xf:submission>
    </xf:model>
  </head>
  <body>
    <xf:group id="main-body">
      <!--
        Get the user's email, password and service.
      -->
      <xf:input ref="Email">
        <xf:label>Email:</xf:label>
      </xf:input>

      <xf:secret ref="Passwd">
        <xf:label>Password:</xf:label>
      </xf:secret>

      <xf:select1 ref="service">
        <xf:label>Service:</xf:label>
        <xf:item>
          <xf:label>Generic</xf:label>
          <xf:value>xapi</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Calendar</xf:label>
          <xf:value>cl</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Picasa</xf:label>
          <xf:value>lh2</xf:value>
        </xf:item>
        <xf:item>
          <xf:label>Spreadsheet</xf:label>
          <xf:value>wise</xf:value>
        </xf:item>
      </xf:select1>

      <!--
        This will do the login.
      -->
      <xf:submit>
        <xf:label>Login</xf:label>
      </xf:submit>

      <!--
        The various states that our form can be in are
        managed here:

          start: nothing has happened yet;
          busy:  a login is in progress;
          done:  a login is complete;
          error: an error occured.
      -->
      <xf:switch>
        <xf:case id="case-start">
          <div>Ready</div>
        </xf:case>

        <xf:case id="case-busy">
          <div>Busy</div>
        </xf:case>

        <xf:case id="case-done">
          <div>
            <h1>Result</h1>
            <xf:output ref="instance('inst-user-data')/authid">
              <xf:label>Authentication ID:</xf:label>
            </xf:output>
          </div>
        </xf:case>

        <xf:case id="case-error">
          <div>
            <h1>Error</h1>
            <xf:output value="substring-after(instance('inst-rs'), 'Error=')">
              <xf:label>Error:</xf:label>
            </xf:output>
          </div>
        </xf:case>
      </xf:switch>
    </xf:group>
  </body>
</html>
